<div class="container">
    <div class="my-form-field value" *ngIf="withStaticValue || withStaticType">
        <span>{{variableLabel | translate}}</span>
        <ng-container [ngSwitch]="withStaticType">
            <ng-container *ngSwitchCase="'color'">
                <input [(colorPicker)]="variableValue" [cpAlphaChannel]="'always'" class="input-color" [style.background]="variableValue"
                       [cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true" [cpCancelButtonClass]="'cpCancelButtonClass'"
                       [cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" [cpPosition]="'auto'"
                       (colorPickerChange)="onChanged()" style="width:80px;"/>
            </ng-container>
            <ng-container *ngSwitchDefault>
                <input [(ngModel)]="variableValue" (change)="onChanged()" style="width: 80px" type="text">
            </ng-container>
        </ng-container>
    </div>
    <div class="my-form-field link" *ngIf="!readonly">
        <span class="span-link">{{tagLabel | translate}}</span>
        <div class="tag-link"></div>
        <button mat-icon-button (click)="onBindTag()">
            <mat-icon>link</mat-icon>
        </button>
    </div>
    <div class="my-form-field input">
        <span>{{getDeviceName()}}</span>
        <input matInput
            class="variable-input"
            title="{{ tagTitle | translate }}"
            placeholder="{{ tagTitle | translate }}"
            type="text"
            [formControl]="tagFilter"
            [matAutocomplete]="autoDevices"
            [readonly]="readonly"
            (input)="onChanged()">
        <mat-autocomplete #autoDevices="matAutocomplete" [displayWith]="displayFn"  (optionSelected)="onDeviceTagSelected($event.option.value)">
            <mat-optgroup *ngFor="let device of devicesTags$ | async" class="group-label" [label]="device.name">
                <mat-option *ngFor="let tag of device.tags" [value]="tag" class="option-label">
                    <span>{{tag.name}}</span>
                </mat-option>
            </mat-optgroup>
        </mat-autocomplete>
    </div>
    <div class="my-form-field bitmask" *ngIf="withBitmask">
        <span>{{'gauges.property-mask' | translate}}</span>
        <div class="my-form-field-bitmask">
            <input value="{{getVariableMask()}}" readonly="true" [disabled]="true">
            <mat-icon class="header-icon" (click)="onSetBitmask()">arrow_drop_down</mat-icon>
        </div>
    </div>
</div>